<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/updateVideo.css"/>
    <link rel="stylesheet" href="<%=basePath %>/css/list.css">
    <link href="<%=basePath %>/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath %>/css/formsCSS.css" rel="stylesheet" type="text/css"/>
    <script src="<%=basePath%>/lib/My97DatePicker/WdatePicker.js"></script>
    <script src="<%=basePath %>/js/jquery.min.js"></script>
    <script src="<%=basePath %>/js/formsJS.js"></script>
</head>
<body>
<div class="connect_wrap">
    <h3 style="text-align: center;">作业</h3>
    <div class="row cl" style="max-width:88%;margin-left:8%;">
        <div class="labelText"></div>
        <form action="<%=basePath%>/course/work/insertOrUpdate" method="post" enctype="multipart/form-data">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <div class="boxs">
                    <input type="hidden" name="id" value="${courseWork.id}">
                    <div style="width:90%;margin-top:30px" id="courseChapterIdDiv">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择课程
                        </div>
                        <select id="courseIds" name="courseId" class="selectBox"
                                onchange="changeCourse()">
                            <c:forEach items="${courses}" var="c">
                                <option value="${c.id}" ${c.id == courseWork.courseId ? 'selected="selected"' : ''}>${c.id}:${c.courseName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div style="width:90%;margin-top:30px;display:none;" id="chapterDiv">
                        <div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">选择章节
                        </div>
                        <select id="chapterIds" name="chapterId" class="selectBox">
                        </select>
                    </div>
                    <%--<div style="width:90%;margin-top:30px;">--%>
                        <%--<div class="labelText" style="position: relative; left: 0px; color: rgb(154, 144, 144);">作业状态--%>
                        <%--</div>--%>
                        <%--<select name="status" class="selectBox" required="required">--%>
                            <%--<option value="1" ${courseWork.status == 1 ? 'selected="selected"' : '' }>上线</option>--%>
                            <%--<option value="2" ${courseWork.status == 2 ? 'selected="selected"' : '' }>下线</option>--%>
                        <%--</select>--%>
                    <%--</div>--%>
                    <input type="submit" value="保存" class="true"/>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    function changeCourse() {
        var chapters = ${chapters};
        var id = $("#courseIds").val();
        $("#chapterIds").empty();
        for (var i = 0; i < chapters[id].length; i++) {
            $("#chapterIds").append("<option value='" + chapters[id][i].id + "'>" + chapters[id][i].chapterName + "</option>");
        }
    }

    $(function () {
        var chapters = ${chapters};
        var id = $("#courseIds").val();
        $("#chapterIds").empty();
        var chapterId = ${not empty courseWork.chapterId ? courseWork.chapterId : 0};
        for (var i = 0; i < chapters[id].length; i++) {
            if (chapterId == chapters[id][i].id) {
                $("#chapterIds").append("<option selected='selected' value='" + chapters[id][i].id + "'>" + chapters[id][i].chapterName + "</option>");
            } else {
                $("#chapterIds").append("<option value='" + chapters[id][i].id + "'>" + chapters[id][i].chapterName + "</option>");
            }
        }
        $("#courseIdDiv").hide();
        $("#courseChapterIdDiv").show();
        $("#chapterDiv").show();
        $("#cardDiv").hide();
    });
</script>
</html>